<template>
  <div class="card-wrap" @click="onCardClick">
    <a-card v-if="loading" :bordered="false" hoverable>
      <slot name="skeleton"></slot>
    </a-card>
    <a-card v-else :bordered="false" hoverable>
      <a-space align="start">
        <a-card-meta>
          <template #title>
            <a-typography-text style="margin-right: 10px">
              {{ title }}
            </a-typography-text>
          </template>
          <template #description>
            {{ description }}
            <slot></slot>
          </template>
        </a-card-meta>
        <a-popover title="explanation">
          <a-button shape="circle">?</a-button>
          <template #content>
            {{ comment }}
          </template>
        </a-popover>
      </a-space>
      <a-switch
        v-if="actionType === 'switch'"
        v-model="open"
        @click.stop="onSwitchClick"
        class="switch-position"
      />
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, defineEmits, onMounted, watch } from 'vue';
  import { useToggle } from '@vueuse/core';

  const props = defineProps({
    loading: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
    comment: {
      type: String,
      default: '',
    },
    actionType: {
      type: String,
      default: 'switch',
    },
    defaultValue: {
      type: Boolean,
      default: false,
    },
  });
  const emits = defineEmits(['cardClick', 'switchClick']);

  const [open, toggle] = useToggle(props.defaultValue);

  watch(
    () => props.defaultValue,
    (newValue) => {
      toggle(newValue);
    }
  );

  const onCardClick = () => {
    emits('cardClick');
  };

  const onSwitchClick = () => {
    console.log('switchok');
    console.log(props);
    emits('switchClick');
  };

  onMounted(() => {
    if (!open.value && props.actionType === 'switch') {
      toggle(true);
    }
  });
</script>

<style scoped lang="less">
  .card-wrap {
    height: 180px;
    // padding-top: 10px;
    transition: all 0.3s;
    border: 1px solid var(--color-neutral-3);
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }
    :deep(.arco-card) {
      height: 100%;
      border-radius: 4px;
      .arco-card-body {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .arco-space {
          width: 100%;
          .arco-space-item {
            align-items: center;
          }
          .arco-card-meta {
            flex-grow: 1;
            .arco-card-meta-title {
              font-size: 16px;
              font-weight: bold;
            }
            .arco-card-meta-description {
              color: rgb(var(--gray-6));
              font-size: 14px;
              line-height: 1.4;
            }
          }
        }
      }
    }
    :deep(.arco-skeleton-line) {
      margin-top: 20px;
    }
  }
  .switch-position {
    position: absolute;
    right: 10px; // 右边距
    bottom: 10px; // 底部距离
  }
</style>
